<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width,initial-scale=1.0" />
		<meta http-equiv="X-UA-Compatible" content="ie=edge">
		<title>Document</title>

	</head>
	<body>
		<div id="box">
			<ul class="list">

			</ul>

		</div>
		<button type="button">点击渲染</button>
		<script type="text/javascript">
			//绑定事件 点击触发请求
			document.querySelector('button').onclick=function(){
				//创建请求实例对象
				let xhr=new XMLHttpRequest();
				//配置xhr对象
				xhr.open("GET","js_data.php");
				//开始请求
				xhr.send();
				xhr.onreadystatechange=function(){
					//接收请求到的数据
					
					let  json=xhr.responseText;
					json=JSON.parse(json);
					//渲染页面
					let html;
					for(let i=0;i<json.length;i++){
						
						html +=`
							<li>
							<img src="${json[i].img}"/>
							</li>
							<li>
							<p>${json[i].title}</p>
							</li>
						`
						
					}
					
					document.querySelector('.list').innerHTML=html
				}
				
				
			}
		</script>
	</body>
</html>
